<template>
    <div class="createScene">
        <el-form :rules="rules" ref="form" :model="sceneInfo">
            <el-form-item prop="name">
                <div class="item">
                    <div class="label">活动名称：</div>
                    <div class="name">
                        <el-input maxlength="24" type="text" placeholder="活动名称" v-model.trim="sceneInfo.name"
                                  show-word-limit></el-input>
                    </div>
                </div>
            </el-form-item>
            <el-form-item prop="area">
                <div class="item">
                    <div class="label">活动区域：</div>
                    <div class="name">
                        <city v-model="sceneInfo.area" :level="2"></city>
                    </div>
                </div>
            </el-form-item>
            <el-form-item prop="industry">
                <div class="item">
                    <div class="label">行业：</div>
                    <div class="name">
                        <el-select v-model="sceneInfo.industry">
                            <el-option v-for="indus in industryList" :key="indus.key" :label="indus.value"
                                       :value="indus.key">
                                {{indus.value}}
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </el-form-item>
            <div class="buttons">
                <el-button type="info" @click="closeModal">取消</el-button>
                <el-button type="primary" @click="copyScene">确认</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
    import city from '../../../common/city';
    import { industryList } from '@/assets/data/data';

    export default {
        name: 'copyModal',
        components: {
            city,
        },
        props: {
            closeModal: {
                required: true,
                type: Function,
            },
            getSceneList: {},
            scene: {
                required: true,
            },
        },
        data() {
            return {
                funcList: [],
                timeList: [],
                industryList: industryList,
                sceneInfo: {
                    name: '',
                    area: '',
                    industry: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                    ],
                    area: [
                        { required: true, message: '请选择活动区域', trigger: 'blur' },
                    ],
                    industry: [
                        { required: true, message: '请选择行业', trigger: 'change' },
                    ],
                },
            };
        },
        methods: {
            copyScene() {
                this.$refs.form.validate(res => {
                    if (res) {
                        let info = this.sceneInfo;
                        let param = {
                            sceneId:this.scene.sceneId,
                            name: info.name,
                            area: info.area.join(','),
                            industry: info.industry,
                        };
                        this.$api.post('/st_scene/copy', param, success => {
                            this.$message.success('复制成功');
                            this.closeModal();
                            this.getSceneList();
                        }, fal => {
                            this.$message.error(fal);
                        });
                    }
                    else {
                        this.$message.info('请完善场景信息');
                        return false;
                    }
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .createScene {
        /deep/ .el-form-item__error {
            padding-left: 115px;
        }
        .item {
            margin: 10px 0;
            display: flex;
            .label {
                margin-right: 10px;
                width: 100px;
                text-align: right;
            }
            .name {
                width: calc(100% - 110px);
            }
            .bgImg.name {
                display: flex;
                /deep/ div.el-image {
                    text-align: center;
                }
                /deep/ img {
                    width: auto;
                }
            }
        }

        .buttons {
            text-align: center;
            padding: 20px;
            button {
                width: 100px;
            }
        }

    }

</style>
